<template>
  <!--顶部的div-->
  <div style="background-color: #ffffff ;padding:0px 20px 18px 20px;height: 6vh" >
    <span style="line-height: 60px;font-size: 20px;">围栏绘制</span>
    <el-button type="primary"  style="float: right;margin-top: 13px" @click="router.push('/geofence')">返回</el-button>
  </div>
<!--  准备一个div充当一个地图容器-->
  <!-- 准备一个div充当地图容器 用来显示地图 -->
  <div id="mapContainer" style="width:100%;height: 84vh;"></div>
</template>

<script setup>
import router from "@/router";
import {nextTick, onMounted, ref} from "vue";
import { DrawScene, DrawControl,OperateEventType } from 'bmap-draw';
import {ElMessage} from "element-plus";
import qs from "qs";
import axios from "axios";
// 将map变成全局变量
let map;
// 创建上一个数组
const GeofenceArr =ref([]);
//一进入页面就立即加载地图
onMounted(()=>{
  // 在新页面加载时获取存储的id
  const geofenceId = localStorage.getItem('geofenceId');
  axios.get(BASE_URL+'v1/geofence/select?id='+geofenceId)
      .then((response)=>{
        if (response.data.code === 2000){
          GeofenceArr.value = response.data.data[0];
          // 从数据中获取目标对象，从响应式对象中提取原始数据，当你需要操作 GeofenceArr 存储的数组数据时
          // （比如取数组中的元素、修改数组内容等），必须先通过 GeofenceArr.value 获取原始数组，再进行操作。
          const item = GeofenceArr.value;  // 注意这里应该用.value（因为是ref响应式数据）

          // 在外部声明变量,用来让下面地图上面去使用
          let longitude, latitude, type;
          let positionObj =null;

          //表示DOM更新完毕后立即执行的方法,为了确保地图加载时,地图容器div已经创建完毕
           nextTick(()=>{

             if (item && item.position) {  // 同时判断item和position是否存在
               // 解析position字符串为对象（关键修正：用positionObj获取经纬度）
               // 如果这行代码处于某个代码块（如 if 块）中，
               // positionObj 的作用域仅限于该代码块（块级作用域）。
              // let positionObj = JSON.parse(item.position);
              //  将字符串变成了一个对象
               positionObj = JSON.parse(item.position);
               longitude = positionObj.longitude;  // 赋值给外部声明的变量
               latitude = positionObj.latitude;
               type=positionObj.type;
             }
             // 现在可以在外部访问了
             console.log("经度值：", longitude);
             console.log("纬度值：", latitude);
             console.log("类型值：", type);
          //   //创建地图实例,注意:忽略导入语句!不需要导入!
          //   // 这里一定要注意：BMapGL不要导包
             map = new BMapGL.Map("mapContainer");
if (type=='circle'){
  // 这是在创建地图中心参数是经纬度
  let point = new BMapGL.Point(longitude, latitude);
  //   //设置地图对象的中心点与缩放级别
  map.centerAndZoom(point, 16);
  // 这是创建圆形
  const circle = new BMapGL.Circle(point, positionObj.radius, {
    strokeColor: "blue",
    strokeWeight: 2,
    strokeOpacity: 0.5
  });
  // 将圆形添加到地图上
  map.addOverlay(circle);
}else if (type=='rectangle'){
               // 1. 解析矩形坐标点
               // recPoints格式："经度1-纬度1,经度2-纬度2,经度3-纬度3,经度4-纬度4"
               // 将字符串按逗号分隔符切分成字符串数组
               // pointStrs里面有生成了几个数值
               const pointStrs = positionObj.recPoints.split(',');
               const points = pointStrs.map(str => {
                 // 将上面的几个数值根据- 进行分割，再将获取到的数值转为数字类型
                 const [longitude, latitude] = str.split('-').map(Number); // 分割并转为数字
                 // 使用数值类型的经纬度创建百度地图的坐标点对象。
                 return new BMapGL.Point(longitude, latitude); // 转换为地图坐标点
               });
                // 这里是创建矩形
                const rectangle = new BMapGL.Polygon(points, {
                  strokeColor: "blue",    // 边框颜色
                  strokeWeight: 2,        // 边框宽度
                  strokeOpacity: 0.5,     // 边框透明度
               //   fillColor: "transparent" // 填充颜色（透明）
                });

               // 3. 计算矩形中心坐标（用于地图居中）
               // sum：累加的中间结果，初始值由第二个参数决定，由下面可知是0
               // reduce是将进行遍历
               // p：当前遍历到的数组元素（即 points 中的一个顶点对象）。
               // 这里要注意上面确定了地图上的坐标，保存到了points数组中，这个数据在百度地图的jar包里面，想要逐个取出累加，需要用他自带的词像是lng,lat,如下
               const centerLng = points.reduce((sum, p) => sum + p.lng, 0) / points.length;
               const centerLat = points.reduce((sum, p) => sum + p.lat, 0) / points.length;
               const centerPoint = new BMapGL.Point(centerLng, centerLat);

               // 4. 设置地图中心点并添加矩形
               map.centerAndZoom(centerPoint, 16); // 缩放级别14（可调整）
                console.log(longitude, latitude);
  console.log(centerPoint);
               map.addOverlay(rectangle);
             }else {
                      ElMessage.error('类型不支持');
             }
           })
        }
      })

})
</script>


<style scoped>

</style>